<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024-02-16
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>课工场题库</title>
    <link rel="icon" type="image/x-icon" href="https://tiku.kgc.cn/testing/favicon.ico"/>
    <link href="css/ShuaTiYshi.css?v=1" rel="stylesheet" type="text/css">
</head>
<body>
<%@ include file="ProjectPage/Tobu.jsp"%>
<form method="post" action="">
<div class="zhutijz">
    <div class="zhuti">
        <div class="jishiqi">
            <div class="lxsj">练习时间</div>
            <div class="stshij"><span id="minute">00</span><span>:</span><span id="second">00</span></div>
            <div class="shifjs"><input onclick="toggleTimer()" id="jishi" type="checkbox"/>是否计时</div>
            <div class="xxyixia">休息一下</div>
            <input type="hidden" name="zdonhzd" id="zdonhzd" value="2"/>
            <input type="hidden" name="shifyfj"  value="${shifyfj}">
            <div><button onclick="tjfshi()" class="xxyixia" type="submit">我要提交</button></div>
            <div class="datika">
                <c:set var="tumshul" value="${fn:length(curriculum)}" />
                <div class="sqdtka">收起答题卡(${tumshul})</div>
                <div class="dijiti">
                    <c:forEach items="${curriculum}" var="timxx" varStatus="vs">
                        <button onclick="scrollToPosition('sex${vs.index+1}')" name="sex${vs.index+1}" class="tmann" type="button">${vs.index+1}</button>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <div class="timu">
        <div class="shuatilx">${shujmc}</div>
        <c:forEach items="${curriculum}" var="curriculum" varStatus="vs">
            <c:set var="optionDLength" value="${fn:length(curriculum.answer)}" />
<%--            保存所有的题目编号，request.getParamenterValues，然后分隔--%>
            <input type="hidden" name="testrescordid" id="testrescordid${curriculum.id}" value="${curriculum.id}"/>
            <input type="hidden" name="chooseanswer" id="chooseanswer${curriculum.id}" value=""/>
            <input type="hidden" name="section" value="${curriculum.section}"/><%--章节知识点--%>
            <input type="hidden" name="knowledgeone" value="${curriculum.knowledgeone}"/><%--一级知识点--%>
            <input type="hidden" name="knowledgeid" value="${curriculum.knowledgetwo}"/><%--二级知识点--%>
            <div id="chax">
            <div id="sex${vs.index+1}" class="xhstnr">
                <div class="xhuangtim">
                    <div class="triangle">
                        <div class="tuhao">${vs.index+1}</div>
                    </div>
                    <div class="timunrong">
                        <div>${curriculum.content}</div>
                        <br>
                        <c:if test="${optionDLength==1}">
                            <div>(选择一项)</div>
                        </c:if>
                        <c:if test="${optionDLength==2}">
                            <div>(选择二项)</div>
                        </c:if>
                        <c:if test="${optionDLength>2}">
                            <div>(选择多项)</div>
                        </c:if>
                    </div>
                </div>
                <div class="xvanxiang">
                    <c:if test="${optionDLength==1}">
                        <div class="xxiang" onclick="selectOption('optionA${vs.index+1}','sex${vs.index+1}',${curriculum.id},'A',1)"><input type="radio" name="sex${curriculum.id}" value="A" id="optionA${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_a}</div>
                        <div class="xxiang" onclick="selectOption('optionB${vs.index+1}','sex${vs.index+1}',${curriculum.id},'B',1)"><input type="radio" name="sex${curriculum.id}" value="B" id="optionB${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_b}</div>
                        <div class="xxiang" onclick="selectOption('optionC${vs.index+1}','sex${vs.index+1}',${curriculum.id},'C',1)"><input type="radio" name="sex${curriculum.id}" value="C" id="optionC${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_c}</div>
                        <div class="xxiang" onclick="selectOption('optionD${vs.index+1}','sex${vs.index+1}',${curriculum.id},'D',1)"><input type="radio" name="sex${curriculum.id}" value="D" id="optionD${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_d}</div>
                    </c:if>
                    <c:if test="${optionDLength>1}">
                        <div class="xxiang" onclick="selectOption('optionA${vs.index+1}','sex${vs.index+1}',${curriculum.id},'A',2)"><input type="checkbox" name="sex${curriculum.id}" value="A" id="optionA${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_a}</div>
                        <div class="xxiang" onclick="selectOption('optionB${vs.index+1}','sex${vs.index+1}',${curriculum.id},'B',2)"><input type="checkbox" name="sex${curriculum.id}" value="B" id="optionB${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_b}</div>
                        <div class="xxiang" onclick="selectOption('optionC${vs.index+1}','sex${vs.index+1}',${curriculum.id},'C',2)"><input type="checkbox" name="sex${curriculum.id}" value="C" id="optionC${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_c}</div>
                        <div class="xxiang" onclick="selectOption('optionD${vs.index+1}','sex${vs.index+1}',${curriculum.id},'D',2)"><input type="checkbox" name="sex${curriculum.id}" value="D" id="optionD${vs.index+1}"/>&nbsp;&nbsp;&nbsp;${curriculum.option_d}</div>
                    </c:if>
                    <br/>
                    <div class="xhx"></div>
                    <div class="jihao">
                        <div><img src="img/img_12.png"><a style="color: #1F97E2" href="#">&nbsp;吐槽</a></div>
                        <div><img src="img/img_13.png"><a style="color: #1F97E2" href="#">&nbsp;标记</a></div>
                        <div><img src="img/收藏 (1).png"><a style="color: #1F97E2" href="#">&nbsp;收藏</a></div>
                    </div>
                </div>
            </div>
            </div>
        </c:forEach>
    </div>
    <%@ include file="ProjectPage/Dibu.jsp" %>
</div>
    <input type="hidden" name="kkshij" id="currentTime"/>
    <input type="hidden" name="shijId" value="${shijId}" id="shijId"/>
</form>
<script src="bootstrap/js/jquery-3.2.1.min.js"></script>
<script>
    let minute = document.getElementById('minute');
    let second = document.getElementById('second');


    let jishi;
    let sfm=0;
    document.getElementById('jishi').checked = true;

    window.onload = function() {
        huqkksj();
        document.getElementById('jishi').checked = true;
        const input = document.getElementById('jishi');
        if (input.checked) {
            jishiqi();
        } else {
            gbjsq();
        }
    };

    //用于滚动到页面的指定位置
    function scrollToPosition(id) {
        // 设置滚动位置的值，这里是一个示例ID
        var targetPosition = document.getElementById(id).offsetTop;
        // 使用scrollTop属性滚动到指定位置
        window.scrollTo({
            top: targetPosition-70,
            behavior: 'smooth'
        });
    }

    function huqkksj(){
        // 获取当前日期
        var currentDate = new Date();
        var dateString = currentDate.toLocaleDateString();
        var cleanedDate = dateString.replace(/[^0-9]/g,'-');

        // 获取当前时间
        var currentTime = new Date();
        var timeString = currentTime.toLocaleTimeString();

        document.getElementById('currentTime').value = cleanedDate+" "+timeString;
    }

    //用于判断是主动提交还是自动提交
    function tjfshi(){
        $('#zdonhzd').val(1);
    }

    function jishiqi(){
        if(!jishi){
            jishi = setInterval(function(){
                let s = parseInt(second.innerText);
                s+=1;
                if(s == 60){
                    s=0;
                    let m = parseInt(minute.innerText);
                    m+=1;
                    minute.innerText = m.toString().padStart(2,'0');
                }
                second.innerText = s.toString().padStart(2,'0');
            },1000)
        }
    }

    function gbjsq(){
        if(jishi){
            clearInterval(jishi);
            jishi=null;
        }
    }

    // 检测输入框选中状态
    function toggleTimer() {
        const input = document.getElementById('jishi');
        if (input.checked) {
            document.getElementById('minute').textContent = '00';
            document.getElementById('second').textContent = '00';
            jishiqi();
        } else {
            gbjsq();
        }
    }

    function selectOption(inputId,inputName,id,abcd,input) {
        // 获取对应id的input元素
        var inputElement = document.getElementById(inputId);


        // 检查input元素是否存在
        if (inputElement) {
            // 设置input元素为选中状态
            if(inputElement.checked){
                inputElement.checked = false;
                // 首先，获取button元素
                let button = $("button[name='" + inputName + "']");

                // 然后，设置背景色为灰色
                button.css('background-color', '#F0F0F0');
                button.css('color', '#000');
            }else {
                inputElement.checked = true;
                // 首先，获取button元素
                let button = $("button[name='" + inputName + "']");

                // 然后，设置背景色为灰色
                button.css('background-color', 'gray');
                button.css('color', '#fff');
            }
        }
        if(input==1) {//单选
            if(inputElement.checked){
                $('#chooseanswer' + id).val(abcd);
            }else{
                $('#chooseanswer' + id).val(null);
            }
        }else{
            var values = [];
            //多选，将本题所泽的所有选项按照abcd的顺序显示
            $('input[name="sex' + id + '"]:checked').each(function(){
                values.push(this.value);
            })
            //排序
            values.sort();
            $('#chooseanswer' + id).val(values.join(""));//abcd的循序  ab ac
        }


    }
    $('#pol.bjing').remove();

    <%--// 获取所有选中的复选框--%>
    <%--var selectedCheckboxes = $("input[type='checkbox'][name='sex${vs.index+1}']:checked");--%>

    <%--// 检查是否有选中的复选框--%>
    <%--if (selectedCheckboxes.length > 0) {--%>
    <%--    // 至少有一个复选框被选中--%>
    <%--    console.log("至少有一个复选框被选中");--%>
    <%--} else {--%>
    <%--    // 没有复选框被选中--%>
    <%--    console.log("没有复选框被选中");--%>
    <%--}--%>

    <%--if ($("#optionD${vs.index+1}").prop("checked")) {--%>
    <%--    console.log("复选框被选中");--%>
    <%--} else {--%>
    <%--    console.log("复选框未选中");--%>
    <%--}--%>
</script>
</body>
</html>
